
<template>
  <el-dialog :close-on-click-modal="false" width="1200px" :title="$tt('label_tms_waybill_task_delivery')"
             :visible.sync="visible" custom-class="dialog_auto" v-loading="loading" @close="hide">

    <el-form :label-width="$globalCss.formLabelWidth_default" :model="formData" :rules="rules" ref="Form">
      <div class="adjustTask">
        <el-form-item :label="$t('label_adjust_task_plan')">
          <el-switch v-model="formData.isAdjust" active-value="Y"
                     inactive-value="N" active-color="#13ce66" inactive-color="#ff4949" @change="changeAdjust"/>
        </el-form-item>
        <el-form-item v-if="appointment" :label="$tt('label_tms_appointment_time')" prop="reservationTime">
          <ex_super_input v-model="formData.reservationTime" class="form_input_small" type="date-picker" :attrs="{
            type: 'datetime',
            'picker-options': {
              disabledDate: t => {
                return t.getTime() < new Date().getTime()
              }
            }
          }" />
        </el-form-item>
      </div>
    </el-form>
    <el-table v-if="forceUpdate" :data="formData.taskIssueDTOList" border default-expand-all row-key="id" style="width: 100%">
      <el-table-column type="expand" v-if="formData.isAdjust === 'Y'">
        <template slot-scope="props">
          <div class="expandBox">
            <el-table :data="props.row.waybillInfoIssueDTOList" border style="width: 100%">
              <el-table-column  width="200" align="center" :label="$t('label_order_code')" prop="trackNumber"></el-table-column>
              <el-table-column align="center" :label="$t('label_plan_box_number')" prop="totalBox"></el-table-column>
              <el-table-column align="center" :label="$t('label_expected_sku_number')" prop="totalQuantity"></el-table-column>
              <el-table-column align="center" :label="$t('label_plan_volume')" prop="totalVolume"></el-table-column>
              <el-table-column align="center" :label="$t('label_plan_weight')" prop="totalWeight"></el-table-column>
              <el-table-column width="160" align="center" :label="$t('label_issued_volume')" prop="issueTotalVolume">
                <template slot-scope="propsChild">
                  <el-input-number v-model="propsChild.row.issueTotalVolume" @change="childChange(props.row, 'issueTotalVolume')" :min="0.01" :precision="2" />
                </template>
              </el-table-column>
              <el-table-column width="160" align="center" :label="$t('label_issued_weight')" prop="issueTotalWeight">
                <template slot-scope="propsChild">
                  <el-input-number v-model="propsChild.row.issueTotalWeight" @change="childChange(props.row, 'issueTotalWeight')" :min="0.01" :precision="2" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" :label="$t('label_tms_task_number')" prop="waybillTaskCode"></el-table-column>
      <el-table-column align="center" :label="`${$t('label_pms_supply')}(${$t('label_channel')})`" prop="carrierName"></el-table-column>
      <el-table-column align="center" :label="$t('label_plan_box_number')" prop="totalBox"></el-table-column>
      <el-table-column align="center" :label="$t('label_expected_sku_number')" prop="totalQuantity"></el-table-column>
      <el-table-column align="center" :label="$t('label_plan_volume')" prop="totalVolume"></el-table-column>
      <el-table-column align="center" :label="$t('label_plan_weight')" prop="totalWeight"></el-table-column>
      <el-table-column width="160" align="center" :label="$t('label_issued_volume')" prop="issueTotalVolume" v-if="formData.isAdjust==='Y'">
        <template slot-scope="props">
          <el-input-number v-model="props.row.issueTotalVolume" @change="parentChange(props.row, 'issueTotalVolume')" :min="0.01" :precision="2" />
        </template>
      </el-table-column>
      <el-table-column width="160" align="center" :label="$t('label_issued_weight')" prop="issueTotalWeight" v-if="formData.isAdjust === 'Y'">
        <template slot-scope="props">
          <el-input-number v-model="props.row.issueTotalWeight" @change="parentChange(props.row, 'issueTotalWeight')" :min="0.01" :precision="2" />
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="submitReady">{{ $tt('label_submit') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      forceUpdate:true,
      appointment: false,
      visible: false,
      loading: false,

      formData: {
        isAdjust: 'N',
        reservationTime: null,
        taskIssueDTOList: [],
      },
      rules: {
        reservationTime: {
          required: true, validator: (r, v, cb) => {
            if (v < new Date().getTime()) {
              cb(this.$tt('label_tms_not_lt_current_time'))
            } else {
              cb()
            }
          }, trigger: 'blur'
        },
      },
      items:[]
    }
  },
  computed: {



  },
  methods: {
    show(items, appointment) {
      this.appointment = appointment
      this.visible = true
      this.items = items
      this.getTaskList()
    },
    getTaskList(){
      this.$ajax({
        url: "/tms-api/waybill/TmsTaskInfoOperationRpc/toTaskIssued.json",
        method: 'post',
        type: 'json',
        data: {
          waybillIdAndVersionList: this.items.map(it => {
            return {
              id: it.id,
              version: it.version,
            }
          }),
        },
        success: ({data}) => {
          this.forceUpdate=false
          this.$nextTick(()=>{
            this.forceUpdate=true
          })
          this.formData.taskIssueDTOList = data.rows

        },
      })
    },
    submitReady() {
      this.$refs['Form'].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          this.$message.error(this.$tt('form_validate_error'))
          return false;
        }
      });
    },
    hide() {
      this.visible = false
      this.formData.isAdjust = 'N'
      this.formData.reservationTime= null
      this.forceUpdate=false
    },
    submit() {
      const url = this.appointment?'/tms-api/waybill/TmsTaskInfoOperationRpc/reservationIssued.json':'/tms-api/waybill/TmsTaskInfoOperationRpc/taskIssued.json'
      this.$ajax({
        url,
        method: 'post', type: 'json',
        loading: true,
        data: this.formData,
        success: (res) => {
          if(!this.appointment){
            this.$message.success('勾选的任务均已成功下发，任务下发后服务商和司机将会收到下发的任务，可在任务执行中进行跟踪和反馈')
          }
          this.hide()
          this.$emit('submitSuccess')
        },
      })


    },
    parentChange(row, key) {

      // 原值
      let oldNum = 0
      let totalNum = 0
      row.waybillInfoIssueDTOList.forEach(item => {
        oldNum += item[key]
      })

      row.waybillInfoIssueDTOList.forEach((item, index) => {
        item[key] = Math.floor((item[key] / oldNum * row[key]) * 100) / 100
        if (index < row.waybillInfoIssueDTOList.length - 1) {
          totalNum += item[key]
        }
      })

      row.waybillInfoIssueDTOList[row.waybillInfoIssueDTOList.length - 1][key] = Math.floor((row[key] - totalNum) * 100) / 100
    },
    childChange(row, key) {
      let num = 0
      row.waybillInfoIssueDTOList.forEach(item => {
        num += item[key]
      })
      row[key] = num
    },
    changeAdjust(){

      this.getTaskList()
    }

  }
}
</script>
<style lang="less" scoped>
.adjustTask {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.expandBox {
  padding: 20px 20px 20px 48px;
}
</style>
